<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
          @click="goBack"
          class="chl"
          name="arrow-left"
          color="#000"
          size="20"
      />
      <div class="chtitle">{{ $t('all.personalCenter') }}</div>
      <div class="djbox">
        <span @click="logOut">{{ $t('all.logOut') }}</span>
      </div>
    </div>

    <div class="dbox" style="margin-top: 61px;">
      <div class="d1">
        <span>{{ `${$t("all.account")}：${infos.invitationCode}` }}</span>
        <span class="btn1" style="margin-left: 10px" @click="handleCopy">
          {{ $t("all.yaoqinglianjie") }}
        </span>
      </div>
      <div class="d2">
      </div>
    </div>

    <div class="wbox zbox" style="top: 21vh">
      <!-- 手机号 -->
      <div class="w1">
        <div class="w11">
          <span>{{ $t("all.phone") }}</span>
        </div>
        <div class="w12">{{ infos.phone }}</div>
      </div>

      <!-- 姓名 -->
      <div class="w1">
        <div class="w11">
          <span>{{ $t("all.name") }}</span>
        </div>
        <div class="w12">{{ infos.name }}</div>
      </div>

      <!-- 身份证号 -->
      <div class="w1">
        <div class="w11">
          <span>{{ $t("all.identityNumber") }}</span>
        </div>
        <div class="w12" v-show="infos.identityNumber">
          {{ infos.identityNumber }}
        </div>
        <div class="w12" v-show="!infos.identityNumber">
          <div class="m4" @click="openBindIdentityCardModal">{{ $t('all.bindIdentityCard') }}</div>
        </div>
      </div>
    </div>

    <!-- 下级列表 -->
    <div class="ebox" style="margin-top: 165px">
      <div class="dtop">
        <span>{{ $t("all.subordinateList") }}</span>
      </div>
      <div class="dcon">
        <van-list
            style="width: 100%;"
            v-model:loading="childLoading"
            :finished="childFinished"
            :finished-text="$t('all.meiyougengduole')"
            @load="getChildList"
            :immediate-check="false"
            :loading-text="$t('all.jiazaizhong')"
        >
          <div class="nbox" v-for="item in childList" :key="item.id">
            <div class="rli">
              <div class="rli1">{{ $t("all.account") }}</div>
              <div class="rli2">{{ item.invitationCode }}</div>
            </div>
            <div class="rli">
              <div class="rli1">{{ $t("all.dizhi") }}</div>
              <div class="rli2">{{ item.address ? item.address : '-' }}</div>
            </div>
            <div class="rli">
              <div class="rli1">{{ $t("all.level") }}</div>
              <div class="rli2">{{ item.inviteLevel }}</div>
            </div>
            <div class="rli">
              <div class="rli1">{{ $t("all.numberOfInvitees") }}</div>
              <div class="rli2">{{ item.invite1Num }}</div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <!-- 绑定身份证 -->
    <van-dialog
        v-model:show="showBindIdentityCard"
        :title="$t('all.bindIdentityCard')"
        :show-confirm-button="false"
        style="overflow: auto;"
        :closeOnClickOverlay="true"
    >
      <div class="ibox2">
        <div class="ili">
          <div class="ili-1">{{ $t('all.name') }}</div>
          <div class="ili-2">
            <van-field
                v-model="bindIdentityCardForm.name"
                :placeholder="$t('all.name')"
            />
          </div>
        </div>
        <div class="ili">
          <div class="ili-1">{{ $t('all.identityNumber') }}</div>
          <div class="ili-2">
            <van-field
                v-model="bindIdentityCardForm.identityNumber"
                :placeholder="$t('all.identityNumber')"
            />
          </div>
        </div>

        <div class="ili">
          <div class="ili-1">{{ $t('all.identityCardFrontPhoto') }}</div>
          <div class="ili-3">
            <van-uploader v-model="bindIdentityCardForm.frontPhoto" :max-count="1"/>
          </div>
        </div>

        <div class="ili">
          <div class="ili-1">{{ $t('all.identityCardBackPhoto') }}</div>
          <div class="ili-3">
            <van-uploader v-model="bindIdentityCardForm.backPhoto" :max-count="1"/>
          </div>
        </div>

        <div class="ili" style="height: 38px">
          <div class="btn" @click="submitBindIdentityCard">
            {{ bindIdentityCardSubmitBtn ? $t('all.processing') : $t('all.tijiao') }}
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang='ts'>
import {computed, getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "@/store";
import {copyDomText} from "@/utils/common";
import {Toast} from "vant";
import http from "@/utils/http";


const {appContext: {config: {globalProperties}}} = getCurrentInstance();
const store = useStore();
const router = useRouter();
const infos = computed(() => store.state.users.infos)
const item = computed(() => infos.value.rechargeAddress.find((v: any) => v.chain === infos.value.envChain))

// 绑定身份证相关
const showBindIdentityCard = ref(false)
const bindIdentityCardForm = reactive<any>({
  name: '',
  identityNumber: '',
  frontPhotoSrc: undefined,
  backPhotoSrc: undefined
})
const bindIdentityCardSubmitBtn = ref(false)

const tabIndex = ref(0)
// 下级列表相关
const pageNum = ref(0)
const pageSize = ref(10)
const childList = ref<any[]>([])
const childLoading = ref(false)
const childFinished = ref(false)
const directInviteNum = ref(0)
const indirectInviteNum = ref(0)

onMounted(() => {
  if (!infos.value.invitationCode) {
    toHome()
  }

  getChildList()
});

const goBack = () => {
  router.go(-1);
};
const handleCopy = () => {
  copyDomText(
      "https://www.coinbase-metamining.com/home?invitationCode=" +
      infos.value.invitationCode
  );
};

// 登出
const logOut = () => {
  store.commit('users/clearToken')
  toHome()
}
// 回到首页
const toHome = () => {
  router.push('/home')
}

// 打开绑定身份证模态窗口
const openBindIdentityCardModal = () => {
  resetBindIdentityCardForm()
  showBindIdentityCard.value = true
}

// 绑定身份证
const submitBindIdentityCard = () => {
  if (bindIdentityCardSubmitBtn.value) {
    Toast(globalProperties.$t('all.processing'));
    return;
  }

  if (!bindIdentityCardForm.name) {
    Toast(globalProperties.$t('all.theNameIsIncorrect'));
    return;
  }
  if (!bindIdentityCardForm.identityNumber) {
    Toast(globalProperties.$t('all.theIdentityNumberIsIncorrect'));
    return;
  }
  if (!bindIdentityCardForm.frontPhoto) {
    Toast(globalProperties.$t('all.theIdentityCardFrontPhotoIsIncorrect'));
    return;
  }
  if (!bindIdentityCardForm.backPhoto) {
    Toast(globalProperties.$t('all.theIdentityCardBackPhotoIsIncorrect'));
    return;
  }

  bindIdentityCardSubmitBtn.value = true
  http.put("user/bind/identity", {
    name: bindIdentityCardForm.name,
    identityNumber: bindIdentityCardForm.identityNumber
  }).then((res: any) => {
    if (res.code === 200) {
      showBindIdentityCard.value = false
      store.commit('users/updateInfos', {
        name: bindIdentityCardForm.name,
        identityNumber: bindIdentityCardForm.identityNumber
      })
    } else {
      Toast(globalProperties.$t('all.operationFailed'));
    }
  }).finally(() => {
    bindIdentityCardSubmitBtn.value = false
  })
}

// 重置绑定身份证
const resetBindIdentityCardForm = () => {
  bindIdentityCardForm.name = ''
  bindIdentityCardForm.identityNumber = ''
  bindIdentityCardForm.frontPhoto = undefined
  bindIdentityCardForm.backPhoto = undefined
}

// 查询下级列表
const getChildList = () => {
  pageNum.value += 1

  http.get("user/app/page/child", {
    pageNum: pageNum.value, //页数
    pageSize: pageSize.value, //每页条数
  }).then((res: any) => {
    if (res.code === 200) {
      if (pageNum.value === 1) {
        childList.value = res.rows;
      } else {
        childList.value = childList.value.concat(res.rows);
      }

      childFinished.value = childList.value.length >= res.total;
      childLoading.value = false;
    }
  });
}
</script>

<style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;

  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }

  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;

    img {
      width: 16px;
      margin-right: 4px;
    }

    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}

.dbox {
  margin: 0 15px 15px 15px;
  border-radius: 4px;
  // background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  height: 100px;
  position: relative;

  .rbox {
    // width: 100px;
    padding-right: 10px;
    height: 30px;
    border-radius: 200px 0 0 200px;
    background: #000;
    position: absolute;
    right: 0;
    top: 28px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: #eacc36;

    img {
      width: 20px;
      margin-right: 2px;
      margin-left: 10px;
    }

    &.rbox2 {
      top: 66px !important;
    }
  }

  .d3 {
    font-size: 12px;
    // font-weight: 600;
    color: #fff;
    position: absolute;
    bottom: 16px;
    left: 24px;
    display: flex;
    align-items: center;
  }

  .d1 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 30px;
    left: 24px;
    display: flex;
    align-items: center;

    img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 4px;
      border: 1px solid #fff;
    }
  }

  .d2 {
    color: #fff;
    position: absolute;
    top: 66px;
    left: 24px;
    display: flex;
    align-items: flex-end;

    .d21 {
      font-size: 28px;
      font-weight: 600;
      margin-right: 4px;
    }

    .d22 {
      font-size: 12px;
    }
  }
}

.btn1 {
  flex: 1;
  height: 30px;
  width: 80px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #ecc714;
  color: #000000;
}

.wbox {
  width: calc(80vw + 40px);
  padding: 10px 0;
  margin: 0 auto 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
  1px 1px 1px 0 hsl(0deg 0% 100% / 30%);

  .w1 {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .w11 {
      display: flex;
      align-items: center;
      color: #5a5a5a;
      font-size: 13px;

      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 4px;
      }
    }

    .w12 {
      font-size: #323234;
      font-weight: 600;
    }
  }
}

.zbox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.m4 {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  border-radius: 4px;
  margin: 20px 0;
}

.ibox2 {
  margin: 10px 20px;

  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;

    .ili-1 {
      font-size: 12px;
      color: #000;
      margin-bottom: 10px;
    }

    .ili-2 {
      border-radius: 4px;
      background-color: #2d2f3b;
      // height: 38px;
      position: relative;

      .xxx {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #878b97;
        font-size: 13px;
        z-index: 1001;

        span {
          margin-left: 6px;
          color: #36b4ea;
        }
      }
    }

    .ili-3 {
      border-radius: 4px;
      // height: 38px;
      position: relative;

      .xxx {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #878b97;
        font-size: 13px;
        z-index: 1001;

        span {
          margin-left: 6px;
          color: #36b4ea;
        }
      }
    }
  }

  .m5 {
    font-size: 12px;
    color: #878b97;
    line-height: 18px;
  }
}


.nbox {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f1f1;

  .rli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;

    .rli1 {
      color: #878787;
      font-size: 13px;
    }

    .rli2 {
      color: #333;
      font-size: 13px;
      text-align: right;
      max-width: 200px;
      word-break: break-all;

      img {
        position: absolute;
        width: 14px;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .rli3 {
      width: 140px;
      padding-right: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }
  }
}


.btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  border-radius: 3px;
  width: calc(100% - 40px);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.ebox {
  width: 80vw;
  padding: 20px;
  margin: 20px auto 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
  1px 1px 1px 0 hsl(0deg 0% 100% / 30%);

  .dtop {
    display: flex;
    align-items: center;

    img {
      width: 24px;
    }

    span {
      font-size: 16px;
      color: #646464;
      font-weight: 600;
      margin-left: 10px;
    }
  }

  .dcon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0;

    .dli {
      display: flex;
      flex-direction: column;
      width: 50%;
      flex: 0 0 50%;
      margin-top: 14px;

      .dli-1 {
        font-size: 12px;
        color: #808eb5;
        margin-bottom: 6px;
      }

      .dli-2 {
        color: #48587b;
        font-size: 15px;
        font-weight: 500;
      }
    }
  }
}
</style>
